<template>
	<div>
		<el-row>
			<el-col >
				<h1><i class="el-icon-eleme"></i>
				{{sysname}}</h1>
			</el-col>
		</el-row>
		<!--传统html页面布局，横向布局不容易实现
		新的页面布局方式flex，他支持新的数学justify-->
		<el-row type ="flex" justify="left">
			<el-button type="primary" @click="toadd()"  icon="el-icon-search">新增</el-button>
		</el-row>
		
		<el-row>
			<el-col>
				<el-table :data="list">
					<el-table-column prop="title"label="标题"></el-table-column>
					<el-table-column prop="sellPoint"label="卖点"></el-table-column>
					<el-table-column prop="price"label="价格"></el-table-column>
					<el-table-column prop="note"label="详情"></el-table-column>
					
					<el-table-column label="[操作]" width="230">
						<!--增加template标签，动态获取当前行的索引和数据-->
						<template slot-scope="s">
						<el-button type="success" @click="toupdata(s.$index,s.row)" icon="el-icon-edit">修改</el-button>
						<el-button type="danger" @click="del(s.$index)" icon="el-icon-delete">删除</el-button>
					    
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
	 
	 <!--定义对话框-->
	 <el-dialog :visible.sync="dialogVisible" width="30%" title="提示">
	 <span>
		 <!--加入一个form表单-->
		 <el-form  :model="m"  label-width="80px">
			 <el-form-item label="标题:" >
				 <el-input v-model="m.title" ></el-input>
			 </el-form-item>
			 
			 <el-form-item label="卖点:" >
			 	<el-input v-model="m.sellPoint"></el-input>
			 </el-form-item>
			 
			 <el-form-item label="价格:">
			 	<el-input v-model="m.price"></el-input>
			 </el-form-item>
			 
			 <el-form-item label="详情:" >
			 	<el-input type="textarea" v-model="m.note"></el-input>
			 </el-form-item>
		 </el-form>
		 
	 </span>
	 <span slot="footer" class="dialog-footer">
		 <el-button type="danger" @click="dialogVisible=false"">取消</el-button>
		  <el-button type="success" @click="save()">确定</el-button>
	 </span>
	</el-dialog>
	</div>
</template>

<script>
	//定义一个组建的导出,data采用es6新标准写法
	export default{
		name:"Item",
		data(){
			return{
				sysname:'京淘电商平台',
				dialogVisible:false, //共同变量，修饰对话框是否展现
				isUpdata:false, //公用变量,判断是否修改的依据
				index:'', //共同变量,保存当前修改记录的索引值
				
				list:[
					{
						title:'javascript入门宝典',
						sellPoint:'这本书很畅销',
						price:99,
						note:'这本书是主流作家所写'
					},
					{
						title:'java从入门到精通',
						sellPoint:'java从业人很多',
						price:188,
						note:'学习java拿到高薪'
					}
				],
				m:{
					//为对话框表单声明对象变量，设置初始值
					title:"",//当修改表单框内容，此时这里随之改变，数据驱动体现
					sellPoint:"",
					price:"",
					note:""
				}
			}
			
			
		},
		methods:{//按钮方法的声明
			toadd:function(){
				//在方法区引入数据去数据，要加关键字this
				this.dialogVisible=true;
				this.m={};//利用js动态特点，把所有属性置空
				this.isUpdata=false; //新增标识
			},
			toupdata:function(index,row){
				//把row当前行的值赋值m
				//this.m=row;----会有副作用
				this.m=JSON.parse(JSON.stringify(row));//完善副作用
				//2.打开对话框
				this.dialogVisible=true;
				this.isUpdata=true;//修改标识
				this.index=index;//通过element-ui.slot获取到当前的索引值,赋值全局
				
				
			},
			del:function(index){
				//删除,第一个参数是当前索引值,第二个是个数
				this.list.splice(index,1)	
			},
			save:function(){//新增和修改复用
				//把当前数据,修改页面输入框内容,结果就保存在m数据中
				if(!this.isUpdata){
				//实现把m对象放入list对象,需要js原生splice函数
				//新增
				this.list.splice(0,0,this.m);
				this.dialogVisible=false;
				
				
				}
				else
				{
				//修改
				//第二个参数,删除一个,第三个参数,当前用户修改值
				this.list.splice(this.index,1,this.m)
				this.dialogVisible=false;
				}
				
			}
		}
	}

</script>

<style>
	textarea{
		font-family: "微软雅黑";
	}
</style>